

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 400;
  outline: none;
}

.iconfont{
  font-size: inherit;
}

li{
  list-style: none;
}

body{
  background-color: #f5f5f5;
  line-height: 1.7;
  font-family: 'Helvetica Neue','Arial','Hiragino Sans GB','STHeiti','Microsoft Yahei','sans-serif';
  font-size: 14px;
  color: $main;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  background-image: url(../images/bg.jpg)
}

b{
  font-weight: 900;
}

a{
  text-decoration: none;
  cursor: pointer
  &.is-udl{
    text-decoration: underline;
  }
}

input{
  outline: none;
}

select[disabled], button[disabled]{
  cursor: not-allowed;
}

// .container{
//   width: 1100px;
// }

header{
  position: relative;
  padding: 20px 0 10px 0;
  .menu{
    width: 50px;
    height: 40px;
    z-index: 1;
    line-height: 25px;
    .content{
      width: 180px;
      background: #fff;
      position: absolute;
      left: 0;
      top: 32px;
      color: #6d2080;
      z-index: 1;
      border: 1px solid #ccc;
      li{
        padding: 0 15px;
        border-bottom: 1px #ccc solid;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        a{
          width: 100%;
          display: inline-block;
          color: $active;
          &:active, &:hover{
            color: #fff;
          }
        }
        &:active, &:hover{
          color: #fff;
          background: #e4705c;
        }
        &.search-wrap:active, &.search-wrap:hover{
          color: $active;
          background: #fff;
        }
        .search{
          position: relative;
          input{
            position: absolute;
            top: 8px;
            width: 105px;
            height: 23px;
            border: 1px solid #6d2081;
            padding-left: 20px;
          }  
          button{
            position: absolute;
            left: 105px;
            height: 23px;
            top: 8px;
            width: 45px;
            padding: 0;
            border-radius: 0;
          }
          i{
            position: absolute;
            left: 4px;
          }
        }
      }
    }
  }
  input{
    border: 2px solid #6d2081;
    background: transparent;
    padding: 5px;
  }
  button{
    background: #6d2081;
    border: none;
    color: #fff;
    font-size: 12px;
    height: 20px;
    padding: 0 15px;
    padding-top: 8px;
    padding-bottom: 22px;
    border-radius: 0;
  }
  .icon-menu{
    font-size: 20px;
    margin-top: -7px;
    color: $active;
    font-weight: 900;
  }
  .auth-item{
    display: inline-block;
    margin-right: 1em;
  }
  .authed{
    text-align: left;
  }

  @media (max-width: $xsWidth) {
    .auth-item{
      color: $red;
    }
  }
  .search-item{
    position: absolute;
  }
  .btn{
    right: 15px;
  }
  .input{
    right: 69px;
  }
  .label{
    right: 250px;
    top: 5px;
  }
}

img{
  max-width: 100%;
}

footer{
  text-align: center;
  padding: 30px 0;
  a{
    color: $main;
    font-weight: 900;
    padding: 0 5px;
    text-decoration: none;
  }
  img{
    padding: 0 5px;
  }
  p{
    margin-bottom: 5px;
  }
}

nav{
  height: 30px;
  background: url(../images/nav-bg.png) no-repeat;
  background-size: cover;
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  height: 28px;
  ul{
    display: inline-block;
  }
  // &::before{
  //   content: ' ';
  //   width: 1px;
  //   height: 14px;
  //   position: absolute;
  //   left: 0;
  //   top: 7px;
  //   border-left:1px solid $main;
  // }
  li{ 
    width: 94px;
    float: left;
    text-align: center;
    // border-left: 2px solid #96633c;
    position: relative;
    a{
      color: $main;
      &.active{
        color: $active;
      }
    }
    &::after{
        content: ' ';
        width: 1px;
        height: 12px;
        position: absolute;
        right: -3px;
        top: 7px;
        border-left:1px solid $main;
    }
    &:first-child::before{
      content: ' ';
      width: 1px;
      height: 12px;
      position: absolute;
      left: 0;
      top: 7px;
      border-left:1px solid $main;
    }
  }
  a{
    color: $main;
  }
}

.g-banner{
  margin-bottom: 20px;
  line-height: 0;
  img{
    width: 100%;
  }
  &.fill{
    margin: 0 -15px;
  }
}

@media (max-width: 767px) {
	.g-banner{
    margin: 0 -15px;
  }
}

@media (max-width: $smWidth) {
	header{
    .auth{
      text-align: right;
    }
    .authed{
      text-align: right;
    }
  }
}

.btn{
  cursor: pointer;
  border: none;
  border-radius: 3px;
  color: #fff;
  &:active{
    opacity: 0.6;
  }
  &.is-default{
    color: #000;
    background: #ddd;  
  }
  &.is-primary{
    color: #fff;
    background: $active;
  }
  &.is-success{
    color: #fff;
    background: $green;
  }
  &.is-md{
    padding: 5px 30px;
  }
  &.is-grey{
    background: #bbb;
  }
}

.btn-wrap{
  padding: 30px 0;
  text-align: center;
  button{
    border: none;
    background: #833c92;
    color: #fff;
    width: 250px;
    height: 35px;
    border-radius: 3px;
  }
}

.g-table {
  font-size: 12px;
  table{
    width: 100%;
    text-align: center;
    border-spacing: 0;
    border-collapse: collapse;
  }
  td,th {
    border: 1px solid #d9d9d9;
    padding: 5px;
    border-spacing: 0;
    border-collapse: collapse;
  }
}

.g-search-wrap{
  .search{
    position: relative;
    input{
      position: absolute;
      top: 8px;
      width: 105px;
      height: 23px;
      border: 1px solid #6d2081;
      padding-left: 20px;
    }  
    button{
      position: absolute;
      left: 105px;
      height: 23px;
      top: 8px;
      width: 45px;
      padding: 0;
      border-radius: 0;
    }
    i{
      position: absolute;
      left: 4px;
    }
  }
}

.g-pagination
  ul
    overflow: hidden
    a
      float: left
      margin-right: 1em
      &.active
        text-decoration: underline

[v-cloak]
  opacity: 0

.g-tab
  margin-bottom: 10px
  padding: 15px 0;
  li
    cursor: pointer
    float: left
    &:first-child
      margin-right: 2em
    &.active
      color: $active
      text-decoration: underline

.g-modal
  .mask
    position: fixed
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
  .content
    position: fixed;
    background: #fff;
    z-index: 1;
    width: 80%;
    top: 10%;
    padding: 30px;
    right: 0;
    left: 0;
    margin: 0 auto;
    .desc
      max-height: 550px
      overflow-y: auto
    .img
      text-align: center
      img 
        max-width: 150px
    p
      margin-bottom: 10px
      color: #333
    button
      padding: 8px 50px
    .icon
      position: absolute
      right: 10px;
      width: 30px;
      height: 30px;
      top: 10px;
      background-size: contain;
      background-repeat: no-repeat
      &.close
        background-image: url(../images/common/close.png)
      &.green-close
        background-image: url(../images/common/green-close.png)
      &.red-close
        background-image: url(../images/common/red-close.png)

.g-form
  width: 320px;
  margin: auto
  .form-item
    margin-bottom: 10px
    label
      padding-top: 6px;
    input, select, textarea
      outline: none;
      border-radius: 3px;
      border: 1px #ccc solid;
      width: 100%;
      padding: 7px 5px;
    input[type='file']
      border: none
      width: 100%;
    select
      height: 30px;
    textarea
      height: 100px
    .red
      color: $red
    .alert
      font-size: 12px
      color: $red

@media (max-width: 767px)
	.g-banner
    margin: 0 -15px;
    margin-bottom: 15px
  .g-modal
    .content
      .desc
        max-height: 200px